<!DOCTYPE html>
<html>
  <head>
    <title>Pivot Table Analyzer</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="./lib/plotly-1.54.7.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/jquery-3.5.1.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/jquery-ui-1.12.1.js" charset="utf-8"></script>
    <script type="text/javascript" src="./lib/papaparse-5.2.0.js" charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="./pivottable-2.23.0-dist/pivot.css"/>
    <script type="text/javascript" src="./pivottable-2.23.0-dist/pivot.js" charset="utf-8"></script>
    <script type="text/javascript" src="./pivottable-2.23.0-dist/pivot.zh.js" charset="utf-8"></script>
    <script type="text/javascript" src="./pivottable-2.23.0-dist/plotly_renderers.js" charset="utf-8"></script>
    
    <script type="text/javascript" src="../modules/3rd/jstorage.js" charset="utf-8"></script>

    <style>
      body {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
        $(function () {
          var derivers = $.pivotUtilities.derivers;
          var aggregatorTemplates = $.pivotUtilities.aggregatorTemplates;
          var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.plotly_renderers);
          
          var fileName = $(location).attr('hash');
          if (fileName){
        	  fileName = fileName.substring(1);	//cut first "#" of url anchor part
          }
          if (! fileName || !(fileName.endsWith(".csv")) ){
        	  alert("未传入文件名, 或者文件扩展名不是 '.csv'.");
        	  return;
          }
          
          document.title = "Pivot Table Analyzer - " + decodeURIComponent(fileName);
          
          var derivedAttributes = {
        		  "@年": function(record){
        			  var d = new Date(record["提交时间"]);
        			  return d.getFullYear();
        		  },
        		  "@年/月份": function(record){
        			  var d = new Date(record["提交时间"]);
        			  return d.getFullYear()+"/"+(d.getMonth()+1);
        		  },
        		  "@星期": function(record){
        			  var d = new Date(record["提交时间"]);
        			  return d.getDay();
        		  }
          };
          
          Papa.parse("/file/"+fileName, {
            download: true,
            skipEmptyLines: true,
            complete: function (parsed) {
              $("#output").pivotUI(parsed.data, {
                renderers: renderers,
                cols: ["组织", "时段"], rows: ["产品", "组件", "@年"],
                aggregatorName: "求和后取整", vals: ["工作量"],
                rendererName: "Heatmap",
                derivedAttributes: derivedAttributes
              }, false, "zh");
            }
          });
        });
    </script>
    <div id="output" style="margin: 30px;">正在启动 PivotTable ...</div>
  </body>
</html>
